<template>
	<view class="pages" >
		<view class="tops">
			<uv-tabs :list="tablist" @click="click" :activeStyle="{
			    fontSize: '30rpx',
			    color: '#121212'
			  }" :inactiveStyle="{
			    fontSize: '28rpx',
			    color: '#666666'
			  }" :lineColor="'linear-gradient(90deg, #DD551B, #F49355)'" :lineWidth="'30rpx'" :lineHeight="'6rpx'">
			</uv-tabs>
		</view>
		<view class="contents" style="padding-bottom: 100rpx;">
			<view class="all">
				<!-- 显示全部内容 -->
				<view class="cards">
					<view class="card" v-for="(item, index) in list" :key="index">
						<view class="top">
							<view class="left" @tap="toShopDetail(item.shop.id)">
								<image :src="$func.showImg(item.shop.avatar)" mode="scaleToFill" />
								<view class="name">{{item.shop.shopname}}</view>
							</view>
							<view class="love" :class="item.shop.isFollow == 1?'is-love':''" @click.stop="follow(item)">
								{{item.shop.isFollow == 0?'+关注':'已关注'}}
							</view>
						</view>
						<view class="middle" @click="jump(item)">
							<view class="texts">
								{{item.title}}
							</view>
							<view class="price">￥{{item.price}}</view>
							<view class="presentation">
								<scroll-view scroll-x="true">
									<view class="scroll-box">
										<view v-for="(v, k) in item.images">
											<image :key="k" :src="$func.showImg(v)" mode="scaleToFill" />
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
						<view class="bottom">
							<view class="left">
								<view class="people">
									{{item.sales}}
									<text>人参与</text>
									<span :class="{
                      'activity-ongoing': item.activity == '1',
                      'activity-ended': item.activity == '0',
                    }">
										{{
                      item.activity == "1"
                        ? "活动进行中"
                        : "活动已结束"
                    }}
									</span>
								</view>
							</view>
							<view class="share" @tap="open(item.id)">分享商品</view>


						</view>
					</view>
				</view>
			</view>
			<uni-popup class="popup" ref="fenxiang" type="center"
				:style="{ 'border-radius': '5px','background':'rgba(0,0,0,.5)' }">
				<view class="pops" style="
								  width: 630rpx;
								  height: 1000rpx;
								  border-radius: 5px;
								  background-color: #fff;
								">
					<image :src="$func.showImg(poster)"></image>
					<view class="bottons" v-if="poster">
						<a :href="$func.showImg(poster)" target="_blank" style="text-decoration: none;">
							<view class="btn1" @click="downloadPoster">保存海报分享</view>
						</a>
						<view class="btn2" @click="copyShareUrl">复制链接分享</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import wanlshop_config from '@/common/config/config';
	export default {
		data() {
			return {
				poster: '',
				tablist: [{
					name: "全部",
					value: 0
				}, {
					name: "特价专区",
					value: 1
				}, {
					name: "团长专区",
					value: 2
				}],
				is_special_offer: 0,
				is_team_leader: 0,
				currentTab: "全部",
				items: [{
						activityStatus: "ongoing"
					},
					{
						activityStatus: "ended"
					},
					{
						activityStatus: "ongoing"
					},
				],

				list: [],
				page: 1,
				total_page: 1,
				is_team: 0,
				goods_id:''
			};
		},
		onShow() {
			this.page  = 1
			this.getList();
		},
		mounted() {
			this.isTeam()
			// this.getList()
		},
		methods: {
			copyShareUrl() {
				let url = wanlshop_config.cdnurl + '/tuangou/#/pages/productDetail/productDetail?id=' +this.goods_id+'&type=xuanfu'
				this.$func.copy(url)
			},
			toShopDetail(shop_id) {
				uni.navigateTo({
					url: '/pages/shop/index?id=' + shop_id
				})
			},
			getPoster(id) {
				uni.request({
					url: '/wanlshop/product/groupShareImg',
					data: {
						good_id: id
					},
					success: res => {
						this.poster = res.data
					}
				})
			},
			open(id) {
				this.goods_id = id
				this.poster = ''
				this.getPoster(id)
				console.log(this.$refs, '988888888');
				this.$refs.fenxiang.open();
			},
			//查询是否是团长
			isTeam() {
				uni.request({
					url: "/wanlshop/product/isTeam",
					method: "GET",
					data: {

					},
					success: res => {
						if (res.data == 1) {
							this.tablist = [{
								name: "全部",
								value: 0
							}, {
								name: "特价专区",
								value: 1
							}, {
								name: "团长专区",
								value: 2
							}]
						} else {
							this.tablist = [{
								name: "全部",
								value: 0
							}, {
								name: "特价专区",
								value: 1
							}]
						}
						console.log('-=-=-=res', res)
					}
				})
			},
			click(item) {
				this.page = 1
				this.is_special_offer = 0
				this.is_team_leader = 0
				console.log("item", item);
				if (item.value == 1) {
					this.is_special_offer = 1
					this.getList()
				}
				if (item.value == 2) {
					this.is_team_leader = 1
					this.getList()
				}
				if (item.value == 0) {
					this.getList()
				}

			},
			jump(item) {
				uni.navigateTo({
					url: "/pages/productDetail/productDetail?id=" + item.id,
				});
			},
			getList() {
				if (this.page > this.total_page) return
				uni.request({
					url: "/wanlshop/product/groupsList",
					method: "GET",
					data: {
						page: this.page,
						is_special_offer: this.is_special_offer,
						is_team_leader: this.is_team_leader
					},
					success: res => {
						console.log('-=-=-=res', res)
						this.list = res.data.data

						let list = res.data.data
						if (this.page > 1) {
							list = this.list.concat(list)
						}
						this.list = list
						this.total_page = res.data.last_page || 1
						this.page++
					}
				})
			},
			follow(item) {
				uni.request({
					url: "/wanlshop/find/user/setFindUser",
					method: "POST",
					data: {
						id: item.shop.find_user.user_no,
						type: 'follow'
					},
					success: res => {
						item.shop.isFollow = res.data.data
						console.log('-=-=-=res', res)
						for (let i of this.list) {
							if (i.shop_id == item.shop_id) {
								i.shop.isFollow = res.data.data
							}
						}
					}
				})
			}
		},
	};
</script>

<style lang='scss' scoped>
	.pages {
		/* height: 200vh; */
		background: #f6f6f6;
		margin: 15rpx 25rpx;
	}

	.cards {
		margin-top: 20rpx;

		.card {
			padding: 30rpx;
			background: #ffffff;
			margin-bottom: 30rpx;
			border-radius: 15rpx;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f1f1f1;

				.left {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 15rpx;
					}

					.name {
						font-size: 34rpx;
						color: #121212;
						margin-left: 25rpx;
						font-weight: 500;
					}
				}

				.love {
					width: 124rpx;
					height: 48rpx;
					line-height: 48rpx;
					background: #e60013;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #ffffff;
					text-align: center;
					font-weight: 500;
				}

				.is-love {
					background-color: #aaa !important;
				}
			}

			.middle {
				padding: 25rpx 0;

				.texts {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
				}

				.price {
					font-weight: bold;
					font-size: 32rpx;
					color: #e60013;
					padding: 25rpx 0;
				}

				.presentation {
					display: flex;
					justify-content: space-between;

					image {
						width: 200rpx;
						height: 210rpx;
						border-radius: 15rpx;
					}
				}
			}

			.bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.people {
						font-size: 28rpx;
						color: #888888;

						text {
							font-size: 28rpx;
							color: #888888;
							margin-right: 15rpx;
						}

						.activity-ongoing {
							color: #46c819;
						}

						.activity-ended {
							color: #999999;
						}
					}
				}

				.share {
					width: 124rpx;
					height: 50rpx;
					line-height: 50rpx;
					border: 1px solid #e60013;
					border-radius: 10rpx;
					font-size: 26rpx;
					color: #e60013;
					text-align: center;
				}
			}
		}
	}

	.scroll-box {
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		gap: 10rpx;
	}

	.popup {
		.pops {
			padding: 30rpx;

			>image {
				width: 100%;
				height: 850rpx;
			}

			.peo {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.prdt {
					p {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					text {
						font-weight: 400;
						font-size: 26rpx;
						color: #888888;
					}
				}
			}

			.bigimg {
				width: 100%;
				height: 500rpx;
				margin-bottom: 20rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.bots {
				.bot {
					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
					}

					.twos {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 15rpx 0;

						.lfs {
							text {
								font-weight: bold;
								font-size: 28rpx;
								color: #e60013;

								span {
									font-size: 36rpx;
								}
							}

							p {
								font-weight: 400;
								font-size: 24rpx;
								color: #888888;
								margin: 15rpx 0;
							}
						}
					}
				}
			}

			.bottons {
				margin-top: -20rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: rgb(238, 215, 185);

				.btn1 {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #221815;
					border-radius: 10rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
					text-align: center;
				}

				.btn2 {
					width: 260rpx;
					height: 80rpx;
					line-height: 80rpx;
					background: #f23030;
					border-radius: 10rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #ffffff;
					text-align: center;
				}
			}
		}
	}
</style>